<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>头部和底部页面</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />

    <style type="text/css">
    html,body{
        height: 100%;
    }
    #wrap{
        height: 100%;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-flow: column;
               flex-flow: column;
    }
    /*#header{
        text-align: center; background-color: #81a9c3; color: #fff;
        width: 100%;
    }
    #header h1{
        font-size: 20px; height: 44px; line-height: 44px; margin: 0em; color: #fff;
    }*/
    #main{
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
    }
    #footer{
        height: 30px; line-height: 30px;
        background-color: #81a9c3;
        width: 100%;
        text-align: center;
    }
    #footer h5{
        color: white;
    }
    .con{font-size: 28px; text-align: center;}
    .flex-con{
      overflow: auto
    }
    /*搜索框样式*/
    #box{
        width: 320px;
        margin:20px auto;
        font-family: 'Microsoft YaHei';
        font-size: 14px;
    }
    input{
        width: 90%;
        border: 1px solid #81a9c3;
        height: 30px;
        float: right;
        background-image: url(image/search.jpg);
        background-repeat: no-repeat;
        background-size: 25px;
        background-position:5px center;
        border-radius: 30px;
        padding-left:10px;
    }

    /*图标*/
    .row{
      margin-top: 100px;
    }
    .row img{
      height:80px;
      margin-left: 60px;
      padding-top: 10px;

    }
    .row .row{
        padding-left: 85px;
        font-family: 'Microsoft YaHei';
        font-size: 12px;
        color:gray;
    }
    </style>
</head>
<body>
  <div id="wrap">
    <div id="header" type="hidden"></div>
      <div id="main" class="flex-con">
      </div>

  </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
var FNScanner;
    apiready = function(){
      var header = $api.byId('header');
      //适配iOS 7+，Android 4.4+状态栏
      //$api.fixStatusBar(header);
      var headerPos = $api.offset(header);

      var main = $api.byId('main');
      var mainPos = $api.offset(main);
      var NVTabBar = api.require('NVTabBar');  //导入NVTabBar模块
      FNScanner = api.require('FNScanner'); //导入FNScanner模块

      NVTabBar.open({
            styles: {
                bg: '#81a9c3',  //菜单背景色
                //bg:"widget://image/NVTabBar/tabbar_bg.png",
                h: 65,
                dividingLine: {
                    width: 0,
                    color: '#000'
                },
                badge: {
                    bgColor: '#ff0',
                    numColor: '#fff',
                    size: 6.0,
                    centerX: 40,
                    centerY: 6
                }
            },
            items: [{
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 0,
                    image: '#81a9c3'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/NVTabBar/sever.png',
                    highlight: 'widget://image/NVTabBar/severed.png',
                    selected: 'widget://image/NVTabBar/severed.png'
                },
                title: {
                    text: '设备管理',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#1296db',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 17,//子项背景距离模块底部的距离
                    // image: 'widget://image/NVTabBar/yuan.png' //中间背景图
                },
                iconRect: {
                    w: 75,//里面条形码的大小   //第一种 75 75   第二种 60 75
                    h: 75,
                },
                icon: {
                    normal: 'widget://image/nvtabbar/scanner1.png',   //注意这里的路径问题会导致编译不出来
                    highlight: 'widget://image/nvtabbar/scanner1.png',
                    selected: 'widget://image/nvtabbar/scanner1.png'
                },

                title: {
                    text : '扫一扫',
                    size: 12.0,
                    normal: '#04477d',   //字体颜色
                    selected: '#547c92',  //选中后字体颜色
                    marginB: 0
                }
            }, {
                w: api.winWidth / 3.0,
                bg: {
                    marginB: 0,
                    image: '#81a9c3'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://image/NVTabBar/user.png',
                    highlight: 'widget://image/NVTabBar/usered.png',
                    selected: 'widget://image/NVTabBar/usered.png'
                },
                title: {
                    text: '我的',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#1296db',
                    marginB: 6.0
                }
            }],
            selectedIndex: 0
        }, function(ret, err) {
              if (ret) {
                  // if (ret.eventType == "click" && ret.index == 0) {  //eventType：交互事件的类型；ret.index为按钮的索引

                    api.openFrame({
                        name: 'pro_menu',
                        url: 'widget://html/pro_menu.html',
                        rect: {
                              x:0,             //左上角x坐标，数字类型
                              y:40,             //左上角y坐标，数字类型
                              w:'auto',             //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度，数字或固定值'auto'
                              h:mainPos.h-100,
                        }
                    });
                  // }
                  if (ret.eventType == "click" && ret.index == 1) {  //eventType：交互事件的类型；ret.index为按钮的索引
                      fnOpenNormalQRCode();//直接打开扫描条形码界面
                  }
                  if (ret.eventType == "click" && ret.index == 2) {  //eventType：交互事件的类型；ret.index为按钮的索引
                    api.openFrame({
                        name: 'my',
                        url: 'widget://html/my.html',
                        rect: {
                              x:0,             //左上角x坐标，数字类型
                              y:40,             //左上角y坐标，数字类型
                              w:'auto',             //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度，数字或固定值'auto'
                              h:mainPos.h-100,
                        }
                    });

                  }
               }//function-if
         });//end  NVTabBar
}//apiready
//-------------------扫描条形码函数---------------------
function fnOpenNormalQRCode() {  // 打开默认的二维码模块
  FNScanner.openScanner({
      autorotation: true
  }, function(ret, err) {
      if (ret) {
          if(ret.eventType == "success") { // 模块扫描成功事件
            // alert(JSON.stringify(ret));
            detail(ret.content);
            //使用传参的方式，更加简单
            // detail(ret.content);
          }
      } else {
          alert(JSON.stringify(err));
      }
  });
}

//-------------------扫描条形码提交函数---------------------
function detail(code){

    api.ajax({
      url: 'http://39.96.60.172:8083/index.php',
      // url:'http://www.app.com/app.php',  //内网手机是不能访问的
      method: 'get',
       dataType:"json",
      data: {
          values: {
              code: code //json对象
          }
      }
    }, function(ret, err) {
      if (ret) {
            var product = new Array(); //定义数组
            product = ret;
                api.openWin({
                    name: 'detail',
                    url: './html/pro_detail.html',
                    pageParam: {
                        product : product //代替传递具体的字段 而是传递全部的数据
                    }
                });
      } else {
          api.alert({ msg: JSON.stringify(err) });
      }
    });
}

</script>
</html>
